<template>
    <el-form :inline="true" :model="formData" class="demo-form-inline">
        <el-form-item>
            <CategoryTree v-model="formData.parentId"></CategoryTree>
        </el-form-item>
        <el-form-item>
            <el-input v-model="formData.name" placeholder="请输入关键字" clearable />
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="onQuery">查询</el-button>
        </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column fixed prop="id" label="ID" width="80" />
        <el-table-column fixed prop="name" label="名称" width="120" />
        <el-table-column prop="img" label="图片" width="120">
            <template #default="scope">

                <el-avatar shape="square" :size="50" fit="fit" :src="scope.row.img" />
            </template>
        </el-table-column>
        <el-table-column prop="statusX" label="状态" width="120" />
        <el-table-column prop="seq" label="排序" width="80" />

        <el-table-column prop="lastUpdateBy" label="最近更新人" width="120" :formatter="formatter" />
        <el-table-column prop="lastUpdateTime" label="时间" width="180" :formatter="formatter" />

        <el-table-column fixed="right" label="操作" width="160">
            <template #default="scope">
                <el-button type="primary" size="small" @click="edit(scope.row)">编辑</el-button>
                <el-button type="success" v-if="scope.row.status == 0" @click="upOrDown(scope.row, 1)"
                    size="small">上架</el-button>
                <el-button type="danger" v-if="scope.row.status == 1" @click="upOrDown(scope.row, 0)"
                    size="small">下架</el-button>
            </template>
        </el-table-column>
    </el-table>
    <br />
    <el-pagination background layout="prev, pager, next" :total="pageData.total" :page-size="pageData.pageSize"
        @current-change="pageChange" />
</template>

<script setup lang="ts">
import { onMounted, ref, reactive } from 'vue'
import { categoryApi } from '@/api'
import CategoryTree from '@/components/CategoryTree.vue';
import { ElMessage, ElMessageBox } from 'element-plus'
import dayjs from 'dayjs'
import {useRouter} from 'vue-router'
const router = useRouter()
const tableData = ref([])

const pageData = reactive({
    total: 0,
    pageSize: 3,
    pageNum: 1
})

const formData = reactive({
    parentId: 0,
    name: ''
})
onMounted(() => {

    callCategoryApi()
})
const edit = (row:any)=>{
    router.push({name:"category-edit",query:{id:row.id}})
}
const upOrDown = (row: any, status: number) => {
    let msg = "";
    if (status === 0) {
        msg = "确定下架[ " + row.name + " ]吗？"
    } else {
        msg = "确定上架[ " + row.name + " ]吗？"
    }
    ElMessageBox.confirm(msg, '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            let id = row.id
            categoryApi.update.call({ id: id, status: status }).then((res) => {
                ElMessage({
                    type: 'success',
                    message: '操作成功',
                })

                callCategoryApi()
            })

        })
        .catch(() => {

        })



}
const formatter = (_row: any, column: any, cellValue: any, _index: any) => {

    if (column.property == "lastUpdateTime") {
        return dayjs(cellValue).format('YYYY-MM-DD HH:mm')
    }
    if (column.property == "lastUpdateBy") {
        return cellValue + " 先生"
    }
}

const pageChange = (val: number) => {
    pageData.pageNum = val
    callCategoryApi()
}

const callCategoryApi = () => {
    let name = formData.name != "" ? formData.name : undefined
    let pageNum = pageData.pageNum
    let pageSize = pageData.pageSize
    categoryApi.select.call(
        { parentId: formData.parentId, name, pageNum, pageSize }
    ).then((res: any) => {

        pageData.total = res.total
        tableData.value = res.items
    })
}
const onQuery = () => {
    callCategoryApi()
}
</script>